<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>personal baidu</title>
    <style>
        *{margin: 0; padding:0;}
        li{list-style: none;}
        body ,html{height: 100%}
        #content{width: 70%; height: 100%; margin: 0 auto;}
        .top{width: 400px; margin: 50px auto;}
        .result{width: 70%; margin: 100px auto;}
        .input{width: 80%; height: 40px; border: 1px solid #999; margin: 0 auto; position: relative;}
        .input.on{border: 1px solid #317ef3;}
        input{width: 80%; height: 100%; padding: 3px 8px; font-size: 16px; outline: none; box-sizing: border-box; border: none; float: left;}
        .btn{width: 20%; height: 100%; background: #317ef3; box-sizing: border-box; border: none; outline: none; float: right;}
        .input ul{width: 80%; border: 1px solid #999; border-top: none; position: absolute; top: 41px; left: -1px; background: #fff;}
        .input li{line-height: 30px; padding-left: 10px; cursor: pointer;}
        .active{border-top: 1px solid #999; border-bottom: 1px solid #999;}
        #tool ul{
            width: 100%;
            overflow: hidden;
        }
        #tool ul li{
            float: left;
            width: 150px;
            height: 150px;
            text-align: center;
            margin: 30px 50px;
            border-radius: 100%;
            border: 1px solid #317ef3;
        }
        #tool ul li a{
            line-height: 150px;
            text-decoration: none;
            color: #317ef3;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
</head>
<body>
<script>
    window.onload = function () {
        new Vue({
            el : '#content',
            data : {
                myData : [],
                t1 : '',
                now : -1,
                isFocus : false
            },
            methods : {
                enter: function () {
                    if(this.t1 == '')return
//                    window.open('https://sp0.baidu.com/s?wd=' + this.t1)
                    location.href = 'https://sp0.baidu.com/s?wd=' + this.t1
                    this.t1 = ''
                },
                get : function (ev) {
                    if(ev.keyCode == 38 || ev.keyCode == 40)return
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                        wd : this.t1
                    },{
                        jsonp : 'cb'
                    }).then(function (res) {
                        this.myData = res.data.s
                    }, function () {

                    })
                },
                changeUp : function () {
                    this.now--
                    if(this.now == -1 || this.now == -2)this.now = this.myData.length-1
                    this.t1 = this.myData[this.now]
                },
                changeDown : function () {
                    this.now++
                    this.now == this.myData.length?this.now = 0:this.now
                    this.t1 = this.myData[this.now]
                },
                goOut : function () {
                    this.isFocus = false
//                    this.myData = []
                },
                goIn : function () {
                    this.isFocus = true
                },
                liClick : function (index) {
                    location.href = 'https://sp0.baidu.com/s?wd=' + this.myData[index]
                }
            }
        })
    }
</script>
<div id="content">
    <div class="top"><img src="logoko.png" alt=""></div>
    <div class="bottom">
        <div class="result">
            <div class="input" :class="{on : isFocus}">
                <!--@keydown.up.prevent阻止焦点默认事件，焦点到最前面-->
                <input type="text" placeholder="百度引擎" v-model="t1" @keyup="get($event)" @keydown.enter="enter()" @keydown.up.prevent="changeUp()" @keydown.down="changeDown()" @focus="goIn()" @blur="goOut()">
                <button class="btn" @click="enter()">百度一下</button>
                <ul v-show="myData.length != 0">
                    <li v-for="item in myData" :class = "{active : $index==now}" @click="liClick($index)">{{item}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="tool">
    	<ul>
    		<li><a href="https://www.baidu.com">百度</a></li>
    		<li><a href="https://huya.com">虎牙</a></li>
    		<li><a href="http://www.dytt8.net/">dytt</a></li>
    		<li><a href="http://www.csdn.net/">csdn</a></li>
    		<li><a href="http://www.mukedaba.com/">慕课大巴</a></li>
            <!--<li><a href="https://www.iqiyi.com">爱奇艺</a></li>-->
            <li><a href="https://v.qq.com">腾讯视频</a></li>
            <li><a href="https://youku.com">这世界很酷</a></li>
    	</ul>
    </div>
</div>
</body>
</html>